<template>
  <div id="container">
    <p id="title">HI! MY ADMINISTOR</p>
    <!-- <i class="el-icon-mo?bile-phone"></i> -->
    <el-divider></el-divider>
    <p id="Storage">Storage</p>
    <div id="progressBar"></div>
    <div id="items">
      <item v-for="(item,index) in proItems " :key="index" :list="item"></item>

    </div>
  </div>
</template>
<script>

import item from "../components/item"

export default {
  name: "Index",
  data:function(){
    return {
      proItems: [{
        title:"天若有情天亦老",
        path: "C:\\Users\\Administrator\\Documents\\Tencent"
      },{
        title:"天若有情天亦老",
        path: "C:\\Users\\Administrator\\Documents\\Tencent"
      },{
        title:"天若有情天亦老",
        path: "C:\\Users\\Administrator\\Documents\\Tencent"
      },{
        title:"天若有情天亦老",
        path: "C:\\Users\\Administrator\\Documents\\Tencent"
      },{
        title:"天若有情天亦老",
        path: "C:\\Users\\Administrator\\Documents\\Tencent"
      }]
    }
  },
  components: {
    item
  }

};
</script>
<style lang="scss" scoped>
* {
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.55);
}
#container {
  height: 100%;
  overflow: hidden;
//   display: flex;
  #title {
    font-size: 3.8rem;
    padding-top: 10px;
    box-sizing: content-box;
    letter-spacing: 3px;
  }
  .el-divider {
    background-color: rgba(28, 50, 47, 0.2);
  }
  #Storage {
    font-size: 2.4rem;
  }
  #progressBar {
    margin: 10px 0px;
    height: 0.5rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
  }
  #items {
    padding-top: 5px ;
    // box-sizing: content-box;
      max-height: 65%;
      overflow-y: auto;
      scroll-behavior: smooth;
      // font-size: ?2rem;
  }

}
</style>